Layouts Overview
sidebar_position: 1
布局概述（Layouts Overview）
布局允许您在 Rive 中构建响应式 UI 组件。让您的设计根据可用空间来适应、填充或重排内容。利用 Rive 的布局系统来适应各种用例：
- 将项目固定到父画板或容器的选定边缘。
- 创建适应文本大小的按钮和标签。
- 构建可以重排、动画和滚动的内容列表和网格。
- 组合和嵌套布局以开发完整的界面
您可以使用这些技术来创建各种可以流畅调整大小以适应任何设备尺寸或方向的生产就绪按钮、列表和菜单。Rive 图形不是模型或原型，它们是可以改变状态并连接到真实数据的功能性图形 — 而且因为 Rive 可以在任何地方运行，您可以在移动应用、游戏引擎、网站、自定义设备等多个平台上重复使用相同的响应式图形。
可搭配观看 Rive 官方布局视频合集（Layouts playlist）：https://www.youtube.com/playlist?list=PLujDTZWVDSsGvor80PkjHaZ3hNNo6s_ef
布局入门（Getting Started with Layouts）
有多种方法可以开始向您的设计添加布局。
布局工具（Layout Tools）
在排列工具中添加了一些新的布局选项：
-
布局（Layout）： 一个基本的布局容器。选择工具并在画板上拖动来创建布局。默认情况下，布局绝对定位到顶部和左侧边缘。新创建的布局边界内的项目将自动成为其子项。在拖动布局时按住
command/control可以防止现有项目被移入布局中。 -
行/列（Row/Column）： 行和列工具是基础布局工具的变体，但包含了按各自方向排列的初始子项集。在将行或列拖到舞台上时，您可以使用数字键或上/下键来定义子项的数量。
包装在布局中（Wrap in Layout）
与其从空的布局容器开始，您可能更喜欢将现有项目包装到布局中。有多种方法可以将活动选择包装在布局中：
-
在舞台或层级上右键点击以显示上下文菜单。选择
包装在>布局中。 -
或者，您可以使用检查器中的
布局选择按钮。 -
使用
shift+L快捷键。 -
使用布局工具在舞台上的项目上绘制布局。默认情况下，包含在拖动布局内的项目将成为绝对定位的子项。在将布局拖到舞台上时按住
command/control修饰键可以防止这种行为。
快速入门视频（Quickstart Video）
布局的父子关系（Layout Parents and Children）
为了创建响应屏幕或浏览器大小的更复杂 UI，理解布局可以放置在其他布局内部非常重要。我们将外部布局称为父级（parent），内部布局称为子级（child）。布局子项通常相对于其布局父级定位（类似于组的工作方式）。此外，父级可以根据子项调整大小（包裹 Hug），或子项可以根据父级调整大小（填充 Fill）。
以下示例帮助可视化这些关系如何工作。在下图中，外部绿色虚线是最外层布局，设置为按单列布局其子项。在该列的第二行中，红色虚线是一个子布局，包含各种设备的电池指示器。此布局定义为行。该布局有 4 个子布局（蓝色虚线），设置为均匀填充其父级的宽度。这 4 个布局中的每一个都设置为列，并包含 2 个子布局（粉色虚线），其中包含一个可视化电池剩余电量的修剪路径和百分比标签。通过创建这些简单的父子布局，我们可以用 Rive 创建无限响应式的内容！
绝对布局与相对布局（Absolute vs Relative Layouts）
布局可以存在于 Rive 的自由形式变换空间中，这意味着您可以将布局绘制到画板上，并像任何其他 Rive 对象一样定位它。这种类型的布局称为绝对定位（Absolute）（绝对定位）。
另一方面，当您希望布局参与其父布局的流动时，这称为相对定位（Relative）（相对于其父级定位）。相对布局的位置由其父级通过许多参数确定，例如行/列（Row/Column）、对齐方式、内边距、间距等。
使用布局检查器右上角的图标在绝对和相对布局之间切换。
布局与其他 Rive 对象（Layouts and Other Rive Objects）
布局容器会以两种方式之一影响其子项：
- 设置子项的位置
- 同时设置子项的位置和大小
这种行为由子项的对象类型决定。由布局容器同时定义位置和大小的对象包括：
- 文本（Text）
- 图像（Images）
- 参数化形状（矩形、椭圆、三角形、多边形和星形）
- 组件实例（叶子模式 Leaf & 布局模式 Layout）
- 其他布局
所有其他对象将仅由布局设置其位置。N-Slicing 功能为更高级形状和组的布局/缩放行为提供了更高级的选项。
与其他一些工具不同，Rive 将提供一个额外的层级项来表示对象的布局容器。这有助于区分 Rive 的自由形式特性与结构化布局系统。例如，布局容器中的对象仍然可以应用额外的变换，如位置、缩放和旋转，以使其突破布局。当与约束结合使用时，这变得特别强大。此外，布局容器可以容纳多个可以相互叠放的对象。
用例（Use Cases）
构建响应式按钮
本教程展示如何从头构建响应式按钮。
使用动态组件重排
本教程解释如何构建在调整大小时可以动态重新定位其元素的 Rive 文件。